// adv的控制器
import adv from "@/adv.ejs"
const $ = require("jquery")
const axios = require("../api/index")
export default function (router) {
    // 创建渲染函数,发送请求向后端请求最新数据
    async function getData(res, p = 1) { //添加默认值防止暴毙
        let { data } = await axios.get("/adv/getAdvData", {
            // 接收页码传输的p后向后端请求对应的数据,然后渲染
            params: {
                p
            }
        })
        let resultData = data.resultData
        // 获取总页码
        let tote = data.tote
        let baseURL = axios.defaults.baseURL
        // 渲染
        // 获取默认转接路由头,添加到img的前方
        res.render(adv({ resultData, baseURL, tote }))
    }
    async function cbData(res) {

        $(".addadv").on("click", function () {
            //取消所有函数
            $(".btn").off('click')
            // 复写
            $(".btn").on('click', addAdv)
            $(".adduermodel").show()
            $(".mask").show()
            //点击×隐藏
        })
        $(".closebtn").on("click", () => {
            $(".adduermodel").hide()
            $(".mask").hide()
        })
        let imgFile = document.querySelector(".imgFile")
        imgFile.onchange = function () {
            //内置类FuleReader将图片读取并转换成base64格式
            let filerader = new FileReader();
            filerader.readAsDataURL(this.files[0]);
            filerader.onload = function () {
                //创建Img标签
                let newImg = new Image()
                newImg.src = filerader.result//src可以直接读取base64格式
                newImg.style.height = "100px"
                $(".imgshow").html("").append(newImg).css({ "overflow": "hidden" })

            }
        }
        // 将事件函数封装便于取消
        async function addAdv() {
            //  提交按钮的点击,点击后获取所有资源,并向后端发送axios请求并携带文件
            // 向后端传输文件及新闻标题
            // 传输图片文件时需要使用使用插件
            let title = $(".username").val()
            let imgData = imgFile.files[0]
            if (title == "" || pwd == "" || imgData == "") {
                console.log("不能为空");
                return
            }
            let from = new FormData()
            from.append("title", title)
            from.append('myimg', imgData)
            // 发送axios前需要创建axios实例
            let { data } = await axios.post("/adv/advData", from)
            if (data.statu === 1) {
                $(".adduermodel").hide()
                $(".mask").hide()
            }
            await getData(res)
            await cbData(res)
        }
        $(".btn").on('click', addAdv)

        // 删除指定项目
        $(".delBtn").on('click', async function () {
            if (confirm('确定删除吗?')) {
                let _id = $(this).attr("myID")
                // 向后端发送删除请求
                let { data } = await axios.delete("/adv/delData", {
                    params: {
                        _id
                    }
                })
                if (data.statu === 1) {
                    console.log("删除成功");
                }
                // 删除后重新渲染页面
                await getData(res)
                await cbData(res)
            }
        })

        // 修改指定项目
        $(".update").on('click', async function () {
            let _id = $(this).attr("myID")
            // 将事件函数封装便于取消
            async function updata() {
                let title = $(".username").val()
                let imgData = imgFile.files[0]
                let from = new FormData()
                // 创建闭包获取_id,不会被销毁
                from.append("_id", _id)
                from.append("title", title)
                from.append('myimg', imgData)
                //整合_id向后端发送修改请求
                let { data } = await axios.post("/adv/updata", from)
                if (data.statu === 1) {
                    // 根据修改成功的返回值,将表单的提交添加函数重新复写并取消修改函数
                    // $(".btn").off('click', updata)
                    // // 复写回原函数 
                    // $(".btn").on('click', addAdv)

                    // $(".adduermodel").hide()
                    // $(".mask").hide()
                } else {
                    // 如果出错就返回错误,弹出警告,隐藏添加栏,让其重新书写,并初始化函数
                    alert("修改可能失败,请重试")
                    // $(".btn").on('click', addAdv)
                    $(".adduermodel").hide()
                    $(".mask").hide()
                    // console.log(data.error);
                }
                // 实际上,直接将表单的事件绑定添加到修改和添加的按钮点击上比较清晰,不管点击哪个按钮直接删除所有事件,只保留一个当前事件
                // 主动修改为被动, 以上为废案
                await getData(res)
                await cbData(res)
            }
            // 需要调用添加表单,表单原有点击提交事件需要处理
            // 方法1,不处理,在创建的同时,删除掉需要更改的项目,但是会造成id的不同
            // tips----有复写id的方法,但不可靠
            // 方法2,使用promise链式执行,取消点击提交事件,重写覆盖事件,后端根据传输值重新查询修改,完成后再次添加提交增加事件

            // 取消表单添加函数
            $(".btn").off('click')
            // 复写表单修改函数
            $(".btn").on('click', updata)
            // 唤起表单
            $(".adduermodel").show()
            $(".mask").show()
        })
        // 页码跳转
        $(".tote").on('click', async function (e) {
            e.preventDefault()
            let p = $.trim($(this).text())
            await getData(res, p)// 传输页码实现跳转
            await cbData(res)
        })
        // 退出登录
        $(".loginout").on("click", function () {
            if (confirm("是否确定退出")) {
                // 跳转到login,然后清除localStorage
                router.go("/login")
                window.localStorage.removeItem('token')
            }
        })
    }
    router.route("/admin/adv", async (req, res) => {
        await getData(res)
        await cbData(res)
    })
}